<template>
	<view  class="home" id="guide-container">
		<view class="user-header" :style="{'margin-top':showDown?'130rpx':'30rpx'}">
			<template v-if="Object.keys(userInfo).length">     
				<view style="width: 110rpx;height:110rpx;" @click="navTo('/pages/wode/wode')">
					<u-image :src="userInfo.avatar" mode=""
						width="110rpx" height="110rpx"  shape="circle">
							<u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="110rpx" height="110rpx" />
						</u-image>
				</view>
				<view style="flex:1;margin-left:20rpx;" >
					<view class="name">
						{{userInfo.nickname}}
					</view>
					<view style="display:flex;align-items:center;font-size: 38rpx;" >
						<view>
							{{ $currency }}{{userInfo.money}}
						</view>
						<image src="@/static/image/home/plus_icon.png" style="width: 28rpx;height:28rpx;margin-left:18rpx;" @click="navTo('/pages/pay/pay')" mode=""></image>
					</view>
				</view>
			</template>
			<template v-else >
				<view style="width: 110rpx;height:110rpx;" @click="navTo('/pages/login/login')">
					<image src="@/static/image/home/avatar.png" style="width: 110rpx;height:110rpx;border-radius:50%;" mode=""></image>
				</view>
				<view class="login-title" @click="navTo('/pages/login/login')">{{$t('login.login')}}</view>
			</template>
			<view style="margin-left:auto;flex:1;padding-right: 30rpx;text-align:end;" @click="showLang = true">
				{{reLanguage}}
			</view>
		</view>
		
		<view class="voucher-time" v-if="userInfo.voucher && userInfo.voucher.expire_days">
			<image :src="`../../static/image/voucher/LV${userInfo.voucher.vip_level}.png`" style="width: 55rpx;height: 50rpx;margin-right: 10rpx" mode="" />
			{{$t('new.valid')}} {{voucherTimestamp}}
		</view>
		
		<view class="top-box">
			<view class="banner">
				<u-swiper height="300" borderRadius="40" mode="number" indicatorPos="bottomRight" :list="bannerList" @click="toUrl"></u-swiper>
			</view>
			<!-- 中奖通知 -->
			<view class="toast" >
				<swiper class="toast-swiper" :autoplay="true" :interval="5000" :vertical="true" :circular="true">
					<swiper-item v-for="(item,index) in broadcastList" :key="index">
						<view class="toast-swiper-item">
							<image class="toast-swiper-item-img" src="@/static/image/home/alert_icon.png"></image>
							<view style="width: 1rpx;height:36rpx;background: #231815;margin-left:20rpx;"></view>
							<view class="toast-swiper-item-main">
								<text>{{item}}</text>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<view class="the-line" style="margin-top: 40rpx;"></view>
			<view class="poster">
				<view class="poster-text">
					<view>
						<view class="item-label">
							{{$t('new.groupbuyingtimes')}}
						</view>
						<view class="item-value" :style="{color: boardInfo.group_buying_num == boardInfo.daily_group_buying_num?'#2CCE11':'#BCBCBC'}">
							<view class="check-box" :class="{'check-box-active': boardInfo.group_buying_num == boardInfo.daily_group_buying_num}">
								<image src="@/static/image/home/checked_icon.png" style="width: 21rpx;height: 16rpx;" mode="" v-if="boardInfo.group_buying_num == boardInfo.daily_group_buying_num"/>
							</view>
							({{boardInfo.group_buying_num || 0}}/{{boardInfo.daily_group_buying_num || 12}})
						</view>
					</view>
					<view>
						<view class="item-label">
							{{$t('new.todaysincome')}}
						</view>
						<view class="item-value" :style="{color: boardInfo.tg_income == boardInfo.total?'#2CCE11':'#BCBCBC'}">
							<view class="check-box" :class="{'check-box-active': boardInfo.tg_income == boardInfo.total}">
								<image src="@/static/image/home/checked_icon.png" style="width: 21rpx;height: 16rpx;" mode=""  v-if="boardInfo.tg_income == boardInfo.total"/>
							</view>
							({{$currency + (boardInfo.tg_income || 0)}}/{{$currency + (boardInfo.total || 0)}})
						</view>
					</view>
					<view>
						<view class="item-label">
							{{$t('new.createthegroup')}}
						</view>
						<view class="item-value" :style="{color: boardInfo.open_group_num == boardInfo.daily_open_group_num?'#2CCE11':'#BCBCBC'}">
							<view class="check-box" :class="{'check-box-active': boardInfo.open_group_num == boardInfo.daily_open_group_num}">
								<image src="@/static/image/home/checked_icon.png" style="width: 21rpx;height: 16rpx;" mode="" v-if="boardInfo.open_group_num == boardInfo.daily_open_group_num"/>
							</view>
							({{boardInfo.open_group_num || 0}}/{{boardInfo.daily_open_group_num || 0}})
						</view>
					</view>
				</view>
				<view class="poster-about" @click="navTo('../home/intro')">
					<view class="inside-content">
						<view class="title">{{$t('wode.about')}}</view>
						<view class="desc">{{$t('new.knowabout')}}</view>
					</view>
				</view>
			</view>
		</view>
		<view style="width: 750rpx;height: 20rpx;background:#F6F6F6;"></view>
		<view class="financial" v-if="financeList.length > 0">
			<view class="financial-tittle">
				<view class="" >
					<text>{{$t('home.financial')}}</text>
				</view>
				<view class="" style="font-size: 28rpx;margin-left: 132rpx;font-weight: 400;margin-top: -8rpx;display: flex;" 
				@click="navTo('/pages/money/myFinancial')">
					<text style="margin-right: 10rpx;">{{$t('home.view')}}</text>
					<image src="@/static/image/home/next-white.png" mode="" style="width: 13rpx;height: 23rpx;margin-top: 8rpx;"></image>
				</view>
			</view>
			<image src="@/static/image/home/H0T.png" mode="" style="width: 76rpx;height: 56rpx;position: absolute;
			top: 124rpx;right: 50rpx;"></image>
			<view class="financial-box" @click="navTo('/pages/money/details', {id: item.id})" v-for="item in financeList" :key="item.id+item.name">
				<view class="percent">
					<view class="">
						{{item.rate}}%
					</view>
					<view class="" style="font-size: 26rpx;line-height: 18rpx;margin-top: 28rpx;">
						{{$t('home.rate')}}
					</view>
				</view>
				<view class="detail">
					<view class="detail-name">
						[NO:{{item.name}}] {{item.finance_name}}
					</view>
					<view class="detail-info" >
						<text>{{$t('home.buyers')}}{{item.buyers}}</text><text style="margin-left: 23rpx;margin-right: 26rpx;width: 7rpx;height: 18rpx;">/</text><text>{{$t('home.price')}}{{$currency + item.price}}</text>
					</view>
				</view>
			</view>
		</view>
		<view class="recommended-title" v-if="recommendList.length !== 0">
			<image src="@/static/image/home/recommended_icon.png" style="width:36rpx;height:36rpx;margin-right:18rpx;" mode="" />
			<view>
				{{$t('home.recommended')}}
			</view>
		</view>
			<view class="high glist" id="guide_0" :data-guide-text="$t('entry.homeguide')" v-if="recommendList.length !== 0">
				<view class="header" style="position:relative;">
					<view class="header-title">
						{{$currency}}{{recommendInfo.name}}
					</view>
					<view class="header-price">
						<image src="@/static/image/home/angle_icon.png" style="width:18rpx; height:16rpx;" mode="" />
						<view>
							+{{$currency}}{{recommendInfo.money}}{{$t('home.perday')}}
						</view>
					</view>
					<view v-if="recommendInfo.extra_reward_desc" style="text-align:center;line-height: 100rpx;background:url(../../static/image/home/moreincome_bg.png) no-repeat;background-size: 100%;width: 100rpx;height:100rpx;position:absolute;top:-50rpx;right:-25rpx;">
						{{recommendInfo.extra_reward_desc}}
					</view>
				</view>
				<view class="main">
					<view class="item" v-for="(item, index) in recommendList" :key="index" @click="navTo('../goods/good', {id: item.id, categoryid: item.category_id})">
						<view class="item-show">
							<image :src="item.cover_image" mode=""></image>
						</view>
						<view class="item-text">
							<view class="item-name u-line-1" style="font-size:24rpx;word-break:break-word;">{{item.name}}</view>
							<view class="item-count">
								{{ $currency }}{{ item.price }}
							</view>
							<view class="remain_bg">
								<image src="@/static/image/home/person_icon.png" style="width: 18rpx;height:17rpx;margin-right:11rpx;" mode="" />
								<view>{{ $t('home.persongroup', {num:item.group_buy_num}) }}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="viewmore-box" @click="navTo('/pages/classify/classify',{index: recommendInfo.id})">
					{{$t('goodsdetail.viewmore')}}
				</view>
			</view>
		<view class="the-line" style="margin-top: 40rpx;"></view>
		<view class="earn-box" @click="navTo('/pages/wode/earnmoney')" v-if="!(systemInfo.is_audited == undefined || systemInfo.is_audited == '0')">
			<image src="@/static/image/home/gift_icon.png" style="width:161rpx;height:142rpx;" mode="" />
			<view>
				<view class="title">{{$t('home.earnmoneytitle')}}</view>
				<view class="desc">{{$t('home.earnmoneydesc')}}</view>
			</view>
			<image src="@/static/image/home/go_icon.png" style="width:86rpx;height:86rpx;" mode="" />
		</view>
		<view class="more-box">
			<view class="more-title">
				<view class="more-line"></view>
				<view style="margin: 0 25rpx;">{{$t('home.moregoods')}}</view>
				<view class="more-line"></view>
			</view>
			<template v-for="category in moregoods" >
				<view class="more-list" :key="category.id" v-if="category.list.length" style="position:relative;">
					<view class="header">
						<view class="header-title">
							{{$currency}}{{category.name}}
						</view>
						<view class="header-price">
							<image src="@/static/image/home/angle_icon.png" style="width:18rpx; height:16rpx;" mode="" />
							<view>
								+{{$currency}}{{category.money}}{{$t('home.perday')}}
							</view>
						</view>
					</view>
					<view class="main">
						<view class="item" v-for="(item, index) in category.list" :key="index" @click="navTo('../goods/good', {id: item.id,categoryid: category.id})">
							<view class="item-show">
								<image :src="item.cover_image" mode=""></image>
							</view>
							<view class="item-text">
								<view class="item-name u-line-1" style="font-size:24rpx;word-break:break-word;">{{item.name}}</view>
								<view class="item-count">
									{{ $currency }}{{ category.price }}
								</view>
								<view class="remain_bg">
									<image src="@/static/image/home/person_icon.png" style="width: 18rpx;height:17rpx;margin-right:11rpx;" mode="" />
									<view>{{ $t('home.persongroup', {num:item.group_buy_num}) }}</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="category.extra_reward_desc" style="text-align:center;line-height: 100rpx;background:url(../../static/image/home/moreincome_bg.png) no-repeat;background-size: 100%;width: 100rpx;height:100rpx;position:absolute;top:-50rpx;right:-25rpx;">
						{{category.extra_reward_desc}}
					</view>
				</view>
				<view class="viewmore-box" @click="navTo('/pages/classify/classify',{index: category.id})">
					{{$t('goodsdetail.viewmore')}}
				</view>
			</template>
		</view>
		<view class="window-box" v-if="!(platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0'))">
			<view class="image-item" v-for="item in systemInfo.windows" v-if="systemInfo.windows" @click="toWindow(item.url)">
				<image :src="item.image" mode="" />
			</view>
			<view class="image-item" @click="experienceMoney = true" v-if="userInfo.experience_time">
				<image src="@/static/image/entry/trialfund_icon.png" style="width: 161rpx;height:129rpx;" mode="" />
				<view class="trialfund-icon">
					{{countTimestamp}}
				</view>
			</view>
		</view>
		<view class="mission-box" @click="toWindow('https://newitem.runcopys.com/mission/#/')" v-if="systemInfo.cash_home_pic || true">
			<view class="mission-content">
				{{systemInfo.cash_home_pic}}
			</view>
		</view>

		<u-mask :show="newLoginReward" :mask-click-able="false" :zoom="false">
			<view class="showRegister-img" >
				<view class="login-box" :style="{backgroundImage:`url(${systemInfo.new_user_pic1})`}" @click="navTo('/pages/login/login',{currentIndex:'register'})">
					<view class="text">
						{{$t('home.signuptext')}}
					</view>
				</view>
				<u-image :show-loading="false" width="60rpx" height="60rpx" style="margin-top: 80rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
					@click="newLoginClose"></u-image>
			</view>
		</u-mask>
		<u-mask :show="activityShow && recommValue && activityLength" :mask-click-able="false" :zoom="false">
			<view class="activity-img" >
				<image :src="currentActivity.image" mode="widthFix" @click="toWindow(currentActivity.url)"/>
				<u-image :show-loading="false" width="60rpx" height="60rpx" style="margin-top: 80rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
					@click="activityShowNext"></u-image>
			</view>
		</u-mask>
		<u-mask :show="newRegisterReward" :mask-click-able="false" :zoom="false">
			<view class="showRegister-img" >
				<u-image :show-loading="false" width="60rpx" height="60rpx" style="margin-left:545rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
					@click="onGuideShow"></u-image>
					<view style="background:#FFF;border-radius: 20rpx;margin-top:20rpx;">
						<view class="register-box">
							<image src="@/static/image/entry/freegift_icon.png" style="width: 105rpx;height:116rpx;margin:auto;margin-top:30rpx;" mode="" />
							<view style="font-size:32rpx;">
								{{$t('new.freeexperiencetitle')}}
							</view>
							<view style="font-size:60rpx;color:#FC3E32;margin-top: 35rpx;">
								{{$currency + systemInfo.user_register_reward}}
							</view>
							<view style="font-size:28rpx;color:#CBCBCB;margin-top: 55rpx;text-align:start;">
								{{$t('new.freeexperiencedesc1')}} <text style="color:#FC3E32;">{{systemInfo.experience_day}}</text> {{$t('new.freeexperiencedesc2')}}
							</view>
							<view style="font-size:36rpx;color:#5BC281;margin-top: 30rpx;">
								{{countTimestamp}}
							</view>
							<view @click="navTo('/pages/pay/pay')" style="text-decoration: underline;font-size:28rpx;color:#909090;margin-top: 10rpx;text-align:end;">
								{{$t('pay.TOP')}}>
							</view>
							<view style="width: 550rpx;margin:45rpx auto 0 auto;">
								<overbtn :btnText="$t('entry.enter')" @btnAction="onGuideShow" :fontSize="30" :propStyle="{borderRadius:'10rpx',width:'430rpx', height: '90rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
							</view>
							<view style="width: 550rpx;margin:20rpx auto 0 auto;">
								<view @click="skip" :style="{textDecoration:'underline',fontSize: '30rpx',borderRadius:'10rpx', height: '90rpx', lineHeight: '90rpx',color: '#BEBEBE', border: 'none'}" btnType="overline">{{$t('entry.skip')}}</view>
							</view>
						</view>
					</view>
			</view>
		</u-mask>
		<u-mask :show="experienceMoney" :mask-click-able="false" :zoom="false">
			<view class="showRegister-img" >
				<u-image :show-loading="false" width="60rpx" height="60rpx" style="margin-left:545rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
					@click="experienceMoney = false"></u-image>
					<view style="background:#FFF;border-radius: 20rpx;margin-top:20rpx;">
						<view class="register-box">
							<image src="@/static/image/entry/freegift_icon.png" style="width: 105rpx;height:116rpx;margin:auto;margin-top:30rpx;" mode="" />
							<view style="font-size:32rpx;">
								{{$t('new.freeexperiencetitle2')}}
							</view>
							<view style="font-size:60rpx;color:#FC3E32;margin-top: 35rpx;">
								{{$currency + systemInfo.user_register_reward}}
							</view>
							<view style="font-size:28rpx;color:#CBCBCB;margin-top: 55rpx;text-align:start;">
								{{$t('new.freeexperiencedesc3')}}
							</view>
							<view style="font-size:36rpx;color:#5BC281;margin-top: 30rpx;">
								{{countTimestamp}}
							</view>
							<view style="width: 550rpx;margin:45rpx auto 0 auto;">
								<overbtn :btnText="$t('pay.TOP')" @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{borderRadius:'10rpx',width:'430rpx', height: '90rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
							</view>
						</view>
					</view>
			</view>
		</u-mask>
		<u-mask :show="levelWindowShow" :mask-click-able="false" :zoom="false">
			<view class="showRegister-img" >
				<u-image :show-loading="false" width="60rpx" height="60rpx" style="margin-left:545rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
					@click="levelWindowShow = false"></u-image>
					<view style="background:#FFF;border-radius: 20rpx;margin-top:20rpx;">
						<view class="register-box">
							<view style="font-size:32rpx;margin-top: 30rpx;">
								{{$t('new.levelwindowtitle')}}
							</view>
							<view style="font-size:60rpx;color:#FC3E32;margin-top: 35rpx;" :style="{color:$utypeprimary}">
								<image src="@/static/image/home/money_icon.png" style="width: 92rpx;height:51rpx;" mode="" />
								+{{$currency + levelWindowInfo.money}}
							</view>
							<view style="font-size:28rpx;color:#aaa;margin-top: 15rpx;">
								{{$t('common.balance')}}: {{$currency + userInfo.money}}
							</view>
							<view class="u-flex u-row-around" style="font-size:30rpx;margin-top: 70rpx;" :style="{color:$utypeprimary}">
								<view>{{$levelArr[userInfo.level]}}</view>
                                <view style="margin:0 20rpx;background:#DBDBDB;flex:1;border-radius:5rpx;overflow:hidden;height:10rpx;">
                                    <view :style="{background:$utypeprimary,width:Number(userInfo.money)/(Number(userInfo.money)+Number(levelWindowInfo.must))*100+'%'}" style="height:10rpx;"></view>
                                </view>
                                <view>{{$levelArr[userInfo.level + 1]}}</view>
							</view>
							<view style="font-size:30rpx;color:#CBCBCB;margin-top: 35rpx;text-align:start;">
								{{$t('new.levelwindowdesc1')}} <text>{{levelWindowInfo.days}}</text> {{$t('new.levelwindowdesc2')}}
							</view>
						</view>
					</view>
			</view>
		</u-mask>

		<u-mask :show="purchaseModalShow" :zoom="false">
            <view style="display:flex;flex-direction:column;justify-content:center;height:100%;">
                <view class="purchase-box">
                    <view class="purchase-title">
                        {{$t('home.reminder')}}
                        <image @click="onPurchaseModalClose" src="@/static/image/goods/close_icon.png" style="width:28rpx;height:28rpx;position:absolute;top:0rpx;right:0rpx;padding:20rpx;" mode="" />
                    </view>
                    <view class="purchase-content">
                        <view class="purchase-info">
                            <view style="font-size: 28rpx;">
                                <span style="vertical-align:middle;margin-right:10rpx;">
                                    <image src="@/static/image/goods/point_icon.png" style="width:30rpx;height:30rpx;margin-top:4rpx;" mode="" />
                                </span>
                                {{$t('home.overabove1')}}
								<text style="color: #FC3E32;font-size:30rpx;margin:0 8rpx;">{{overInfo.member || 0}}</text>
                                {{$t('home.overabove2')}}
								<text style="color: #FC3E32;font-size:30rpx;margin:0 8rpx;">{{$currency}}{{overInfo.income || 0}}</text>
                                {{$t('home.overabove3')}}
                            </view>
                            <view class="u-flex" style="flex-wrap:wrap;margin-top:30rpx;">
                                <view style="position:relative;width: 33%;text-align:center;margin-top:14rpx;" v-for="(item, index) in overList" :key="index">
                                    <u-image :show-loading="false"  class="list-avatar" :src="item.avatar" style="margin:auto;" width="90rpx" height="90rpx" mode="" >
                                        <u-image slot="error" :show-loading="false" class="list-avatar" src="@/static/image/home/avatar.png" width="90rpx" height="90rpx" />
                                    </u-image>
                                    <view class="u-line-1" style="width:100%;margin:auto;">{{item.nickname}}</view>
                                    <view style="position:absolute;top:54rpx;left:49rpx;width:95rpx;height:39rpx;">
                                        <image :src="`../../static/wode/LV${item.level}.png`" style="width:95rpx;height:39rpx;" mode="" />
                                    </view>
                                </view>
                            </view>
                        </view>
                        <view style="width:610rpx;height:90rpx;margin:50rpx auto 0 auto;display:flex;justify-content:space-between;">
							<view style="width:300rpx;">
								<overbtn btnText="Update now"  @btnAction="navTo('/pages/pay/pay')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
							</view>
							<view style="width:300rpx;" v-if="!(platform == 'ios' && (systemInfo.is_audited == undefined || systemInfo.is_audited == '0'))">
	                            <overbtn :btnText="$t('common.team')" @btnAction="navTo('/pages/team/team')" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
							</view>
                        </view>
                    </view>
                </view>
            </view>
		</u-mask>

		<u-mask :show="nolongerShow" :zoom="false" class="flex-mask">
            <view class="nomoney-box">
                <view style="margin-top:240rpx;margin-bottom:80rpx;font-size:32rpx;color: #65676B;">
                    {{$t('common.pleaseinstall')}}!
                </view>
                <view class="inside">
                    <view class="u-flex u-row-between">
                        <view class="label">{{$t('common.installdirectly')}}</view>
                        <view class="go-btn">
                            <overbtn btnText="Download" @btnAction="downloadApk" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;">
                        <view class="label">{{$t('common.gps')}}</view>
                        <view class="go-btn">
                            <overbtn :btnText="$t('common.go')" @btnAction="goToDownload" :fontSize="30" :propStyle="{width:'116rpx', height: '60rpx', color: '#0F0F0E', border: 'none'}" btnType="overline"></overbtn>
                        </view>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="nolongerShow = false"></u-image>
		</u-mask>
		<u-mask :show="levelupShow" :zoom="false" class="flex-mask">
            <view class="nogoods-box">
				<view style="height:495rpx;width: 100%;">
					<view style="color:#FFF;font-size:32rpx;padding:36rpx 0;margin:0 45rpx;">
						<view style="height:29rpx;line-height:29rpx;flex:1;padding-left:29rpx;font-size:36rpx;">{{$t('new.congrat')}}</view>
					</view>
					<view class="u-flex u-row-center" style="color: #FFF;font-size: 40rpx;margin-top: 40rpx;">
						{{levelupInfo.old_level_name}}
						<image src="@/static/image/home/level_arrow.png" style="width: 75rpx;height: 28rpx;margin:0 30rpx;" mode="" />
						{{levelupInfo.new_level_name}}
					</view>
					<view style="padding: 30rpx 25rpx;display:flex;flex-direction:column;justify-content: space-between;color:#C1C3D0;font-size: 30rpx;background:url(../../static/image/home/item_bg.png) no-repeat;background-size: 630rpx 208rpx;width:630rpx;height:208rpx;margin:auto;margin-top: 37rpx;">
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('new.dailyincome')}}</view>
							<view style="flex:1;">{{$currency + levelupInfo.old_daliy_income}}</view>
							<image src="@/static/image/home/item_arrow.png" style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{$currency + levelupInfo.new_daliy_income}}</view>
						</view>
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('member.ratelabel')}}</view>
							<view style="flex:1;">{{levelupInfo.old_level_rate}}</view>
							<image src="@/static/image/home/item_arrow.png" style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{levelupInfo.new_level_rate}}</view>
						</view>
						<view class="u-flex u-row-end">
							<view style="width:60%;text-align:start;">{{$t('new.createagroup')}}</view>
							<view style="flex:1;">{{levelupInfo.old_open_group_num}}</view>
							<image src="@/static/image/home/item_arrow.png" style="width: 44rpx;height:21rpx;margin:0 10rpx;" mode="" />
							<view style="flex:1;">{{levelupInfo.new_open_group_num}}</view>
						</view>
					</view>
				</view>
                <view class="inside">
                    <view class="u-flex u-row-center" style="margin-bottom: 10rpx;">
						<image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;" mode="" />
						<view style="margin: 0 15rpx;color:#878D9C;font-size:34rpx;">{{$t('new.recommendpro')}}</view>
						<image src="@/static/image/goods/purchase_title_left.png" style="width:23rpx;height:21rpx;transform: rotateY(180deg);--webkit-transform:rotateY(180deg);" mode="" />
					</view>
                    <view class="u-flex u-row-between" style="margin-top: 40rpx;" v-if="levelupInfo.goodlist && levelupInfo.goodlist.list">
                        <view class="item" v-for="(item, index) in levelupInfo.goodlist.list" v-if="index < 2" :key="index" @click="navTo('../goods/good', {id: item.id,categoryid: upgrade.goodlist.id})">
							<view class="item-show">
								<image :src="item.cover_image" mode=""></image>
							</view>
                           <view class="header-price">
                                <image src="@/static/image/home/angle_icon.png" style="width:18rpx; height:16rpx;" mode="" />
                                <view>
                                    +{{$currency}}{{item.rewards}}{{$t('home.perday')}}
                                </view>
                            </view>
							<view class="item-text">
								<view class="item-name u-line-1" style="font-size:24rpx;word-break:break-word;">{{item?item.name:''}}</view>
								<view class="item-count">
									{{ $currency }}{{ item.price }}
								</view>
								<view class="remain_bg">
									<image src="@/static/image/home/person_icon.png" style="width: 18rpx;height:17rpx;margin-right:11rpx;" mode="" />
									<view>{{ $t('home.persongroup', {num:item?item.group_buy_num:''}) }}</view>
								</view>
							</view>
						</view>
                    </view>
                </view>
            </view>
            <u-image :show-loading="false" width="60rpx" height="60rpx" style="margin:0 auto;margin-top: 40rpx;" src="@/static/image/icon_delete_tou.png" mode="aspectFit"
                @click="levelupShow = false"></u-image>
		</u-mask>

		<u-select v-model="showLang" :list="languageList" @confirm="changLang" :confirm-text="$t('common.confirm')"
			:cancel-text="$t('common.cancel')"></u-select>

		<mask-guide-uni ref="maskGuide" nextBtnPosition="bottom" :startFrom="0" @guideClose="() => {}" @nextGuide="navTo()">
		</mask-guide-uni>
		<userlog :showPopup="showLogin" @showClose="showLogin = false"></userlog>
		<tabbar page="/pages/home/home"></tabbar>
	</view>
</template>

<script>
	var appsFlyer = uni.requireNativePlugin("sn-appsflyer");
	import {
		getBanner,
		broadcast,
		getaflist,
		setaf,
		popupwindows,
		popuplevelwindows,
		upgrade,
		board
	} from '@/api/home.js'
	import {
		Login,
		Register,
		Logout
	} from '@/api/auth.js'
	import {
		homepagegoods,
		recommend
	} from '@/api/goods.js'
	import {
		homelist,
	} from '@/api/finance.js'
	import {
		checkTime,
        countDown,
		parseTime
	} from '@/utils/utils'
	export default {
		components: {
		},
		data() {
			return {
				boardInfo: {},
				levelupInfo: {},
				levelupShow: false,
				levelWindowShow: false,
				levelWindowInfo: {},
				experienceMoney: false,
				timeCount: '',
				nowTime: 0,
				showLang: false,
				languageList: [
					{
						value: 'english',
						label: 'English'
					},
					{
						value: 'hi_di',
						label: 'हिंदी'
					},
				],
				showLogin: false,
				currentActivityImageIndex: 0,
				bannerList: [
				],
				broadcastList: [],
				moregoods: [],
				recommendInfo: {},
				newRegisterReward: false,
				newLoginReward: false,
				activityShow: false,
				activityLength: false,
				showDown: false,
				purchaseModalShow: false,
				overInfo: {},
				overList: [],

				nolongerShow: false,

				financeList: [],
			}
		},
		async onLoad(option) {
			if (uni.getStorageSync('oned_token')) {
				this.$store.dispatch('getUserInfo')
				this.loadBoard();
			}
			if (option.agent) {
                uni.setStorageSync('agent_code', option.agent)
            }
			// #ifdef APP-PLUS
			let that = this;
			plus.device.getInfo({  
                success: function(e) {  
                    let obj = JSON.parse(JSON.stringify(e)); 
					that.$store.commit('SET_CLIENTID',obj.uuid)
                },  
                fail: function(e) {  
                }  
            });
			// #endif
			// #ifdef H5
				this.showDown = false;
			// #endif
			// this.loadFinance();
			// this.loadBanner();
			// this.loadBroadcast();
			await this.loadGoods();
			// this.loadRecommend();

			this.nowTime = new Date().getTime()/1000;
			this.timeCount = setInterval(() => {
				this.nowTime++
			}, 1000)
		},
		onReady() {
		},
		onShow() {
			if (Object.keys(this.$store.getters.userInfo).length == 0) {
				this.newLoginReward = true
				try {
                    const value = uni.getStorageSync('launchFlag');
                    if (value) {
                    } else {
						uni.setStorage({ 
							key: 'launchFlag', 
							data: true, 
						}); 
                        this.newLoginReward = true
                    }
                } catch(e) { 
                    uni.setStorage({ 
                        key: 'launchFlag', 
                        data: true, 
                    }); 
                    this.newLoginReward = true
                }
			} else {
				try {
                    const value = uni.getStorageSync('guideFlag');
                    const islogin = this.$store.getters.userInfo.islogin
					console.log(value)
                    if (value || islogin == 2) {
						this.activityShow = true;
                    } else {
                        this.newRegisterReward = true
                    }
                } catch(e) { 
					console.log(e)
                    this.newRegisterReward = true
                }
			}
			// #ifdef APP-PLUS
			if (uni.getStorageSync('oned_token')) {
				this.getUserAfList()
			}
			// #endif
		},
		computed: {
			reLanguage() {
				let lan = ''
				let language = uni.getStorageSync('language') || 'english'
				if (language == 'hi_di') {
					lan = 'हिंदी'
				} else {
					lan = 'English'
				}
				return lan
			},
			countTimestamp() {
				let userinfo = this.$store.getters.userInfo || {}
				if (!userinfo.experience_time || !this.nowTime) {
					return '00:00:00'
				}
				let countTimestamp = countDown(userinfo.experience_time, this.nowTime)
				this.$forceUpdate()
				if (countTimestamp == '00:00:00') {
					clearInterval(this.timeCount)
				}
				return countTimestamp;
			},
			voucherTimestamp() {
				let userinfo = this.$store.getters.userInfo || {}
				if (!userinfo.voucher.expire_days) {
					return '00:00:00'
				}
				let countTimestamp = parseTime(userinfo.voucher.expire_days, this.nowTimeForVoucher)
				this.$forceUpdate()
				if (countTimestamp == '00:00:00') {
					clearInterval(this.voucherCount)
				}
				return countTimestamp;
			},
			recommValue() {
				return this.$store.getters.recommValue || false
			},
			systemInfo() {
				return this.$store.getters.systemInfo || {}
			},
			platform() {
				return this.$store.getters.platform || ''	
			},
			userInfo() {
				return this.$store.getters.userInfo || {}
			},
			recommendList() {
				return this.recommendInfo.list || []
			},
			currentActivity() {
				let info = this.$store.getters.systemInfo.popup_list || []
				if (info.length) {
					this.activityLength = true;
				} else {
					
				}
				return info[this.currentActivityImageIndex] || {}
			},

		},
		watch: {
			'$store.getters.systemInfo.popup_list': {
				handler(newValue){
					if (Object.keys(this.$store.getters.userInfo).length == 0) {
						return;
					}
					if (newValue &&!newValue.length) {
						let overtime = uni.getStorageSync('overwindow');
						if (!overtime || overtime < new Date().getTime()) {
							
							this.getPopupWindow()
						} else {
							let overleveltime = uni.getStorageSync('overlevelwindow');
							if (!overleveltime || overleveltime < new Date().getTime()) {
								this.getPopupLevelWindow()
							}
						}
					}
				},
				immediate: true
			},
			'$store.getters.upgrade': {
				handler(newValue){
					if (Object.keys(this.$store.getters.userInfo).length == 0) {
						return;
					}
					if (Object.keys(newValue).length > 0) {
						this.levelupShow = true;
						this.levelupInfo = newValue;
						setTimeout(() => {
							this.$store.commit('SET_USER_UPGRADE', JSON.stringify({}))
							uni.setStorageSync('upgrade', JSON.stringify({}))
						}, 2000);
					}
				},
				immediate: true
			},
		},
		methods: {
			async loadFinance() {
				let result = await homelist();
				this.financeList = result;
			},
			async getPopupWindow() {
				let result = await popupwindows();
				this.overInfo = result;
				this.overList = result.list;
				if (result.list.length) {
					uni.setStorageSync('overwindow', new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000)
					this.purchaseModalShow = true;
				} else {
					let overleveltime = uni.getStorageSync('overlevelwindow');
					if (!overleveltime || overleveltime < new Date().getTime()) {
						this.getPopupLevelWindow()
					}
				}
			},
			
			async getPopupLevelWindow() {
				let result = await popuplevelwindows();
				if (result.money) {
					this.levelWindowInfo = result;
					uni.setStorageSync('overlevelwindow', new Date(new Date().toLocaleDateString()).getTime()+24*60*60*1000)
					this.levelWindowShow = true;
				}
			},
			async onPurchaseModalClose() {
				this.purchaseModalShow = false;
				let overleveltime = uni.getStorageSync('overlevelwindow');
				if (!overleveltime || overleveltime < new Date().getTime()) {
					this.getPopupLevelWindow()
				}
			},
			changLang(e) {
				// this.$i18n.locale = 'hi'
				uni.setStorageSync('language', e[0].value)
				// #ifdef APP-PLUS
				plus.runtime.restart()
				// #endif
				// #ifndef APP-PLUS
				window.location.reload()
				// #endif
			},
			getUserAfList() {
				let afList = []
				let orderList = []
				getaflist().then(res => {

					afList = res
					if (afList && +afList.length) {
						for (let i = 0; i < afList.length; i++) {
							orderList.push(afList[i].id)
							try {
								appsFlyer.logEvent({
										eventName: "af_pay_revenue",
										eventValues: {
											'af_revenue': afList[i].price,
											'af_content_type': 'topup',
											'af_content_id': afList[i].order_id,
											'af_currency': this.$currcode
										}, // 事件数据
									},
									(e) => {
										if (+orderList.length) {
											setaf({
												ids: afList[i].id
											}).then(res => {
												console.log(res);
											})
										}
									}
								);
							} catch (error) {
							}
						}
					}
					
				}).catch(e => {
					console.log(e);
				})
			},
			activityShowNext() {
				const length = this.systemInfo.popup_list.length;
				this.currentActivityImageIndex++;
				if (this.currentActivityImageIndex > length - 1) {
					this.currentActivityImageIndex = 0;
					this.$store.commit('SET_RECOMM', false)
					this.activityShow = false;
					let overtime = uni.getStorageSync('overwindow');
					if (!overtime || overtime < new Date().getTime()) {
						
						this.getPopupWindow()
					}
				} else {

				}
			},
			skip() {
				this.newRegisterReward =false;
				this.activityShow = true;
				uni.setStorage({ 
                    key: 'guideFlag', 
                    data: true, 
                    success: function () {
                        console.log('error时存储launchFlag');
                    } 
                }); 
			},
			onGuideShow() {
				// this.showReward = false;
				// this.maskGuide = true;
				this.newRegisterReward =false;
                        // launchFlag!=true显示引导页
				this.$nextTick(() => {
					this.$refs.maskGuide.start({
						textStyle:{
							fontSize: '28rpx',
						},
						angleStyle: {
							top: '-12rpx',
							left: '30rpx'
						},
						showNextButton: false,
					})
				})
			},
			newLoginClose() {
				this.newLoginReward = false;
			},
			navTo(val, data) {
				this.$refs.maskGuide.nextGuide();
				this.$refs.maskGuide.startStatus = false;
				let param = '';
				if (data) {
					param = '?';
					for (let i in data) {
						if (i == 'url') {
							param += `${i}=${encodeURIComponent(data[i])}&`
						} else {
							param += `${i}=${data[i]}&`
						}
					}
				}
				uni.navigateTo({
					url: val + param
				})
			},
			async loadGoods() {
				let result = await homepagegoods()
				this.moregoods = result;
				console.log("11: " + JSON.stringify(result));
			},
			async loadBoard() {
				let result = await board()
				this.boardInfo = result;
				console.log("22: " + JSON.stringify(result));
			},
			async loadBroadcast() {
				let result = await broadcast()
				this.broadcastList = result;
				console.log("33: " + JSON.stringify(result));
			},
			async loadRecommend() {
				let result = await recommend()
				this.recommendInfo = result;
				console.log("44: " + JSON.stringify(result));
			},
			async loadBanner() {
				let result = await getBanner()
				this.bannerList = result;
				console.log("55: " + JSON.stringify(result));
			},
			
			async login() {
				this.showLogin = !this.showLogin;
			},
			logout () {
				Logout().then(res => {
					this.$store.dispatch('removeToken')
				}).catch(() => {
				})
			},
			async toUrl(val) {
				console.log(val);
				const item = this.bannerList[val].jump_url;
				// type 1内链 2外链 3 调起whatsapp
				if (item.indexOf('http') > -1) {
					// #ifdef APP-PLUS
					this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					// #endif
					// #ifndef APP-PLUS
					if (item.indexOf('t.me') > -1 || item.indexOf('wa.me') > -1) {
						window.open(item)
					} else {
						this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					}
					// #endif
				} else {
					uni.navigateTo({
						url: item
					})
				}
			},
			async toWindow(val) {
				const item = val;
				// type 1内链 2外链 3 调起whatsapp
				if (item.indexOf('http') > -1) {
					// #ifdef APP-PLUS
					this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					// #endif
					// #ifndef APP-PLUS
					if (item.indexOf('t.me') > -1 || item.indexOf('wa.me') > -1) {
						window.open(item)
					} else {
						this.navTo('/pages/home/wbv', {url: encodeURIComponent(item)})
					}
					// #endif
				} else {
					uni.navigateTo({
						url: item
					})
				}
			},
			toDownLoad() {
				this.nolongerShow = true;
				// window.location = this.systemInfo.android_url;
				// uni.navigateTo({
				// 	url: '../dl/dl'
				// })
			},
			goToDownload() {
				window.location = this.systemInfo.android_url;
			},
            downloadApk() {
                // window.location = this.systemInfo.app_version_1.update_url_and_file
            },
		},
	}
</script>

<style lang="scss" scoped>
	.viewmore-box {
		margin-top: 20rpx;
		text-align: center;
		font-size: 26rpx;
		text-decoration: underline;
		color: $u-type-primary;
	}
	.voucher-time {
		margin-left: 40rpx;
		margin-top: 20rpx;
		display: flex;
		align-items: center;
		color: #AAA;
		font-size: 26rpx;
	}
	.home {
		padding-top: var(--status-bar-height);
	}
	.home-download {
			position: fixed;
			// bottom: 200rpx;
			top: 0;
			left: 0;
			// transform: translateX(-50%);
			width: 100%;
			z-index: 999;
			display: flex;
			align-items: center;
			justify-content: space-between;
			background: linear-gradient(115deg, #ffe44b 0%, #fea326 100%);
			height: 100rpx;
			padding: 0 10rpx 0 24rpx;

			.home-download-close {
				min-width: 70rpx;
				height: 70rpx;

				image {
					border-radius: 13rpx;
					width: 100%;
					height: 100%;
				}
			}

			.home-download-main {
				max-width: 470rpx;
				flex:1;
				color: #ad6701;
				white-space: nowrap;
				text-overflow: ellipsis;
				overflow: hidden;

				.home-download-main-title {}

				.home-download-main-cont {
					font-size: 24rpx;
					// width: 454rpx;
				}
			}

			.home-download-down {
				display: flex;
				align-items: center;
				justify-content: flex-start;

				.down {
					width: 60rpx;
					height: 60rpx;
					margin-right: 10rpx;
				}

				.close {
					width: 40rpx;
					height: 40rpx;
				}

				image {
					width: 100%;
					height: 100%;
				}
			}
		}
	.window-box {
		z-index: 10000;
		position: fixed;
		bottom: 128rpx;
		right: 30rpx;
		display: flex;
		flex-direction: column;
		.image-item {
			margin: 12rpx 0;
			text-align: end;
		}
		image {
			width: 110rpx;
			height: 110rpx;
		}
	}
	.user-header {
		
		margin-top: 30rpx;
		padding: 0 40rpx;
		display: flex;
		align-items: center;
		.name {
			font-weight: 500;
			font-size: 44rpx;
		}
		.login-title {
			font-size: 44rpx;
			margin-left: 20rpx;
			font-weight: 500;
		}
	}
	.showRegister-img {
		-webkit-animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
				animation: scale-up-center 0.7s cubic-bezier(0.390, 0.575, 0.565, 1.000) both;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		.showRecomm-img-close {
			margin-top: 10rpx;
		}
		.register-box {
			text-align: center;
			width: 610rpx;
			background: linear-gradient(180deg, rgba(255, 109, 27, .3) 0%, rgba(255, 109, 27, .1) 10%, #fff 100%);
			background-size: 610rpx ;
			background-position: center top;
			overflow: hidden;
			border-radius: 20rpx;
			padding: 0 20rpx 30rpx 20rpx;
			
		}
		.login-box {
			text-align: center;
			width: 750rpx;
			height:769rpx;
			// background: url(../../static/image/entry/signuptoget.png) no-repeat;
			background-size: 750rpx ;
			background-position: center top;
			overflow: hidden;
			.text {
				font-size: 32rpx;
				text-align: center;
				height: 28rpx;
				line-height: 28rpx;
				margin-top: 545rpx;
			}
		}
	}
	.activity-img {
		-webkit-animation:fade-in .5s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in .5s cubic-bezier(.39,.575,.565,1.000) both;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		height: 100%;
		image {
			width: 500rpx;
		}
		.showRecomm-img-close {
			margin-top: 10rpx;
		}
	}
	.top-box {
		padding-bottom: 40rpx;
		.banner {
			margin-top: 43rpx;
			padding: 0 40rpx;
			width: 100%;
			// height: 450rpx;
			height: 300rpx;
			overflow: hidden;
			// margin-top: -88rpx;
	
			.banner-swiper {
				width: 100%;
				height: 100%;
			}
			/deep/ .u-swiper-indicator {
				bottom: 0rpx!important;
				right: 0!important;
			}
		}
		.toast {
			margin-top: 30rpx;
			padding: 0 40rpx;
			background-color: #fff;
	
	
			.toast-swiper {
				height: 70rpx;
				line-height: 70rpx;
				background:#ECECEC;
				border-radius: 10rpx;
				font-size:28rpx;
	
				.toast-swiper-item {
					display: flex;
					align-items: center;
					justify-content: center;
	
					.toast-swiper-item-img {
						width: 28rpx;
						height: 26rpx;
						image {
							margin-top: 10rpx;
							width: 28rpx;
							height: 26rpx;
						}
					}
	
					.toast-swiper-item-main {
						width: 80%;
						margin-left: 23rpx;
						margin-right: 0rpx;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
	
						.name {
							color: #FF3950;
							// color: $uni-text-color-primary;
						}
					}
				}
			}
		}
	}
	.the-line {
		width: 670rpx;
		height:2rpx;
		background: #ECECEC;
		border-radius: 2rpx 1rpx 1rpx 0rpx;
		margin: auto;
	}
	.poster {
		margin: 0 40rpx;
		margin-top: 40rpx;
		color: #FFF;
		display: flex;
		justify-content: space-between;
		box-shadow: 0px 0px 20rpx 0rpx #E5E5E5;
		border-radius: 20rpx;
		.poster-left {
			padding: 20rpx;
			background: url(@/static/image/home/team_bg.png) no-repeat;
			background-size: 100% 100%;
			width: 320rpx;
			height: 335rpx;
		}
		.poster-right {
			padding: 20rpx;
			background: url(@/static/image/home/invite_bg.png) no-repeat;
			background-size: 100% 100%;
			width: 320rpx;
			height: 335rpx;
		}
		.poster-text {
			display: flex;
			flex-direction: column;
			justify-content: space-around;
			align-items: start;
			padding: 0 20rpx;
			.item-label {
				color: #0F0F0E;
				font-size: 30rpx;
			}
			.item-value {
				margin-top: 10rpx;
				color: #BCBCBC;
				font-size: 26rpx;
				display: flex;
				align-items: center;
				.check-box {
					margin-right: 8rpx;
					display: flex;
					align-items: center;
					width: 20rpx;
					height: 20rpx;
					border: 2rpx solid #BCBCBC;
				}
				.check-box-active {
					border: 2rpx solid #2CCE11;
				}
			}
		}
		.poster-about {
			padding: 30rpx 25rpx;
			background: url(@/static/image/home/aboutus_bg.png) no-repeat;
			background-size: 100% 100%;
			width: 351rpx;
			height: 361rpx;
			.inside-content {
				border-radius: 10rpx;
				padding: 10rpx;
				background: rgba(72, 114, 152, .39);

			}
		}
		.title {
			font-size: 36rpx;
			font-weight: 500;
		}
		.desc {
			margin-top: 10rpx;
			font-size: 24rpx;
		}
	}
	.financial{
		position: relative;
		overflow: hidden;
		width: 729rpx;
		height: 502rpx;
		margin: 31rpx 10rpx 5rpx;
		background: url(@/static/image/home/financial.png) no-repeat;
		background-size: 100%;
		.financial-tittle{
			display: flex;
			font-size: 38rpx;
			font-family: Rubik;
			font-weight: 500;
			font-style: italic;
			color: #FFFFFF;
			line-height: 40rpx;
			text-shadow: 0rpx 0rpx 6rpx #BE5E00;
			margin: 36rpx 0 42rpx 53rpx;
		}
		.financial-box{
			display: flex;
			padding: 26rpx 0;
			width: 650rpx;
			height: 141rpx;
			background: #F6F6F6;
			border-radius: 10rpx;
			margin: 0 auto;
			.percent{
				font-size: 60rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #FC3E32;
				width: 158rpx;
				text-align: center;
				line-height: 43rpx;
				border-right: 2rpx solid #DEDEDE;
			}
			.detail{
				padding: 0 21rpx;
				width: 500rpx;
				font-size: 28rpx;
				font-family: Rubik;
				font-weight: 400;
				color: #0F0F0E;
				line-height: 26rpx;
				color:#0F0F0E;
				.detail-name{
					overflow: hidden;
					text-overflow:ellipsis;
					white-space: nowrap;
				}
				.detail-info{
					font-size: 26rpx;
					font-family: Rubik;
					font-weight: 400;
					color: #AAAAAA;
					line-height: 23rpx;
					margin-top: 34rpx;
				}
			}
		}
		.financial-box1{
			margin-top: 10rpx;
		}
	}
	.recommended-title {
		display: flex;
		align-items: center;
		color: #0f0f0f;
		font-weight: 500;
		font-size: 38rpx;
		line-height: 36rpx;
		padding: 40rpx;
	}
	.glist {
		margin: 0 30rpx;

		padding: 0 0 30rpx 0;
		background-color: #FAF5F0;
		background-image: url(@/static/image/home/refresh_icon.png);
		background-repeat: no-repeat;
		background-size: 90rpx 79rpx;
		background-position: 529rpx 6rpx ;
		border-radius: 30rpx;
		border: 2rpx solid #FFD4AA;
		// background-image: url(@/static/image/home/upcoming_bg.png);
		// height: 490rpx;


		.header {
			display: flex;
			flex-direction: row;
			align-items: center;
			color:#7A4E10;
			justify-content: space-between;
			// width: 690rpx;
			height: 90rpx;
			padding: 0 28rpx;
			// background: linear-gradient(90deg, #3c83ff, #a4c6ff 100%);

			.header-title {
				font-size: 36rpx;
				font-family: Alibaba PuHuiTi;//rubick;;
				font-weight: 400;
				display: flex;
				align-items: center;
				// color: #ffffff;

				image {
					width: 40rpx;
					height: 40rpx;
					margin-right: 17rpx;
				}
			}

			.header-price {
				display: flex;
				align-items: center;
				color: #FC3E32;
				font-size: 32rpx;
			}

			.header-right {
				flex: 1;
				text-align: right;
			}
		}

		.main {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			padding: 0 10rpx;
			width: 100%;
			overflow-x: auto;
			// padding: 100rpx 4rpx 42rpx 4rpx;
			// background: #ffffff;
			// background: #f6f6f6;
			// box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0, 0, 0, 0.10);
		}

		.main-op {
			width: 2rpx;
			height: 2rpx;
			color: #FFFFFF;
		}

		.item {
			border-radius: 15rpx;
			background-color: #fff;
			width: 250rpx;
			height: 332rpx;
			margin: 0 10rpx;
			opacity: 1;
			.item-show {
				display: flex;
				align-items: center;
				justify-content: center;
				height: 190rpx;
				position: relative;
				// background-color: #fff;

				.item-show-prize {
					white-space: nowrap;
					width: 184rpx;
					height: 42rpx;
					opacity: 1;
					background: #90b9ff;
					border-radius: 20rpx 20rpx 0rpx 0rpx;
					line-height: 42rpx;
					font-size: 24rpx;
					font-family: Roboto, Roboto-Medium;
					font-weight: 500;
					text-align: LEFT;
					color: #ffffff;
					text-align: center;
					position: absolute;
					bottom: -2rpx;
					z-index: 970;
				}

				image {
					z-index: 99;
					// width: 160rpx;
					// height: 160rpx;
					max-width: 250rpx;
					max-height: 190rpx;
					// margin-top: -62rpx;
					opacity: 1;
					border-radius: 8rpx 8rpx 0 0;
					// box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(142, 164, 212, 0.50);
				}
			}

			.item-text {
				display: flex;
				text-align: start;
				flex-direction: column;
				width: 100%;
				// height: 106rpx;
				padding: 12rpx 0 12rpx 16rpx;
				background-color: #FFFFFF;

				.item-name {
					width: 100%;
					font-size: 28rpx;
					font-family: Roboto, Roboto-Medium;
					font-weight: bold;
					margin-top: 6rpx;
				}

				.item-num {
					font-size: 28rpx;
					color: #FC3E32;
					font-family: DIN, DIN-Regular;
					font-weight: 400;
				}

				.item-count {
					margin-top: 6rpx;
					font-size: 32rpx;
					font-family: DIN, DIN-Medium;
					font-weight: bold;
					// color: #b9b9b9;
					color: #FC3E32;
				}
				.remain_bg {
					align-items: center;
					display: flex;
					font-size: 24rpx;
					color:#AAA;
					height: 34rpx;
					line-height: 36rpx;
					// background: url(@/static/image/home/remain_bg.png) no-repeat;
					background-size: 100% 100%;
				}

				.item-line {
					width: 100%;
					margin: -8rpx 20rpx;
				}
			}
		}

	}
	.high {
		.header {
			// background: url(../../static/image/home/high.png);
			// background-size: 100% 100%;
		}

		.header-right {
			display: flex;
			align-items: center;
			justify-content: flex-end;

			.hour,
			.minute,
			.seconds {
				width: 40rpx;
				height: 42rpx;
				text-align: center;
				line-height: 42rpx;
				opacity: 1;
				background: #17273a;
				border-radius: 8rpx;
				font-size: 26rpx;
				font-family: DIN, DIN-Medium;
				font-weight: bold;
				color: #ffffff;
			}

			.colon {
				margin: 0 6rpx;
				font-size: 26rpx;
				font-family: DIN, DIN-Medium;
				font-weight: bold;
				color: #17273a;
			}
		}

		.item-text {
			// height: 180rpx;
		}

		.item-show {
			// background-color: #FFF5F4;

			image {
				// box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(217, 122, 168, 0.2);
			}
		}

		.item-op {
			margin-top: 0 !important;
			margin-bottom: 6rpx !important;
		}
	}
	.earn-box {

		display: flex;
		align-items: center;
		color: #FE9C40;
		border-radius: 85rpx;
		margin: 40rpx 30rpx;
		margin-top: 40rpx;
		padding: 0 15rpx;
		justify-content: space-around;
		background: #FFF6DA;
		height: 170rpx;
		.title {
			font-size: 48rpx;
			font-weight: 500;
		}
		.desc {
			font-size: 28rpx;
		}
	}
	.flex-mask {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
	.nomoney-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
        height: 664rpx;
        background: url(@/static/image/goods/nomoney_bg.png) no-repeat;
        background-size: 100%;
        text-align: center;
        .inside {
            margin:auto;
            margin-top: 30rpx;
            background: #F6F6F6;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .go-btn {
                height: 60rpx;
                width: 160rpx;
            }
        }
    }
	.purchase-box {
		overflow: hidden;
		background: $u-type-primary;
		border-radius: 20rpx;
		width: 670rpx;
		margin:auto;
        .time-box {
            width: 36rpx;
            height: 34rpx;
            margin:0 4rpx;
            text-align: center;
            font-size: 24rpx;
            line-height: 34rpx;
            color: $u-type-primary;
            border-radius: 5rpx;
        }
        .hourmin {
            background: #0F0F0E;
        }
        .second {
            background: #FC3E32;
        }
        .purchase-title {
            position: relative;
            height: 104rpx;
            line-height: 104rpx;
            color:#000000;
            font-size: 36rpx;
            text-align: center;
        }
        .purchase-content {
            position: relative;
            background: #FFF;
            padding-bottom: 50rpx;
            font-size: 30rpx;
            z-index: 1;
            .purchase-info {
                padding: 30rpx;
                .teamleader {
                    border:2rpx solid #FC3E32;
                    border-radius:50%!important;
                }
            }
            .purchase-detail {
                background: #F6F6F6;
                padding: 20rpx;
                margin: 10rpx 20rpx;
                border-radius: 20rpx;
                .detail-item {
                    line-height: 52rpx;
                    height: 52rpx;
                }
            }
        }
        .purchase-content:after {
            background: #FFF;
            width: 200%;
            position:absolute;
            height: 200rpx;
            left: -50%;
            top: -20rpx;
            z-index:-1;
            content: '';
            border-radius: 50% 50% 0 0;
        }
	}
	.more-box {
		background: #F6F6F6;
		padding: 40rpx 0 200rpx 0;
		.more-title {
			display: flex;
			justify-content: center;
			align-items: center;
			color: #AAAAAA;
			margin-bottom: 10rpx;
			.more-line {
				width: 120rpx;
				height: 2rpx;
				background: #AAAAAA;
			}
		}
		.more-list {
			margin: 0 30rpx;
			margin-top: 30rpx;
			padding: 0;
			background: linear-gradient(90deg, #FF6D1B 0%, #FF8E20 100%);
			border-radius: 30rpx;
			// background-image: url(@/static/image/home/upcoming_bg.png);
			// height: 490rpx;


			.header {
				display: flex;
				
				flex-direction: row;
				align-items: center;
				color:#fff;
				justify-content: space-between;
				height: 90rpx;
				padding: 0 28rpx;

				.header-title {
					font-size: 36rpx;
					font-family: Alibaba PuHuiTi;//rubick;;
					font-weight: 400;
					display: flex;
					align-items: center;
					// color: #ffffff;

					image {
						width: 40rpx;
						height: 40rpx;
						margin-right: 17rpx;
					}
				}

				.header-price {
					display: flex;
					align-items: center;
					color: #fff;
					font-size: 32rpx;
				}

				.header-right {
					flex: 1;
					text-align: right;
				}
			}

			.main {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: flex-start;
				padding: 30rpx 10rpx;
				width: 100%;
				overflow-x: auto;
				border-radius: 30rpx;
				background-color: #FFFFFF;
				// padding: 100rpx 4rpx 42rpx 4rpx;
				// background: #ffffff;
				// background: #f6f6f6;
				// box-shadow: 0rpx 0rpx 13rpx 0rpx rgba(0, 0, 0, 0.10);
			}

			.main-op {
				width: 2rpx;
				height: 2rpx;
				color: #FFFFFF;
			}

			.item {
				border-radius: 15rpx;
				background-color: #fff;
				border: 1rpx solid #C17C1C;
				width: 250rpx;
				height: 332rpx;
				margin: 0 10rpx;
				opacity: 1;

				.item-show {
					display: flex;
					align-items: center;
					justify-content: center;
					height: 190rpx;
					position: relative;
					// background-color: #fff;

					.item-show-prize {
						white-space: nowrap;
						width: 184rpx;
						height: 42rpx;
						opacity: 1;
						background: #90b9ff;
						border-radius: 20rpx 20rpx 0rpx 0rpx;
						line-height: 42rpx;
						font-size: 24rpx;
						font-family: Roboto, Roboto-Medium;
						font-weight: 500;
						text-align: LEFT;
						color: #ffffff;
						text-align: center;
						position: absolute;
						bottom: -2rpx;
						z-index: 970;
					}

					image {
						z-index: 99;
						// width: 160rpx;
						// height: 160rpx;
						max-width: 250rpx;
						max-height: 190rpx;
						// margin-top: -62rpx;
						opacity: 1;
						border-radius: 15rpx 15rpx 0 0;
						// box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(142, 164, 212, 0.50);
					}
				}

				.item-text {
					display: flex;
					flex-direction: column;
					width: 100%;
					// height: 106rpx;
					padding: 12rpx 0 12rpx 16rpx;
					border-top: none;
					border-radius: 0 0 20rpx 20rpx;

					.item-name {
						width: 100%;
						font-size: 28rpx;
						font-family: Roboto, Roboto-Medium;
						font-weight: bold;
						margin-top: 6rpx;
					}

					.item-num {
						font-size: 28rpx;
						color: #FC3E32;
						font-family: DIN, DIN-Regular;
						font-weight: 400;
					}

					.item-count {
						margin-top: 6rpx;
						font-size: 32rpx;
						font-family: DIN, DIN-Medium;
						font-weight: bold;
						// color: #b9b9b9;
						color: #FC3E32;
					}
					.remain_bg {
						display: flex;
						font-size: 24rpx;
						color:#AAA;
						height: 34rpx;
						line-height: 36rpx;
						// background: url(@/static/image/home/remain_bg.png) no-repeat;
						background-size: 100% 100%;
						align-items: center;
					}

					.item-line {
						width: 100%;
						margin: -8rpx 20rpx;
					}
				}
			}

		}
	}
	@-webkit-keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0.2);
				transform: scale(0.2);
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	}
	@keyframes scale-up-center {
	0% {
		-webkit-transform: scale(0.2);
				transform: scale(0.2);
	}
	100% {
		-webkit-transform: scale(1);
				transform: scale(1);
	}
	}

.fade-in{-webkit-animation:fade-in .5s cubic-bezier(.39,.575,.565,1.000) both;animation:fade-in .5s cubic-bezier(.39,.575,.565,1.000) both}
/* ----------------------------------------------
 * Generated by Animista on 2022-10-12 15:42:26
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

@-webkit-keyframes fade-in{0%{opacity:0}100%{opacity:1}}@keyframes fade-in{0%{opacity:0}100%{opacity:1}}


.trialfund-icon {
	width: 124rpx;
	height: 34rpx;
	border: 2rpx solid #FFFFFF;
	background: linear-gradient(90deg, #FF5221 0%, #F3567D 54%, #F273C2 99%);
	border-radius: 15rpx;
	color: #FFF;
	font-size: 26rpx;
	margin-left:25rpx;
	text-align: center;
}

.nogoods-box {
        overflow: hidden;
        margin: 0 auto;
        width: 670rpx;
		background-image: linear-gradient(0deg, #272733 28.999999999999996%, #494E60 100%);
		background-repeat: no-repeat;
        background-size: 670rpx 495rpx;
		background-color: #FFF;
		min-height: 495rpx;
        border-radius: 20rpx;
        text-align: center;
        .inside {
            margin:auto;
            margin-bottom: 30rpx;
            border-radius: 20rpx;
            width:610rpx;
            padding: 40rpx 30rpx;
            .label {
                color: #65676B;
                font-size: 32rpx;
            }
            .go-btn {
                height: 60rpx;
                width: 160rpx;
            }
        }
        .header-price {
            font-weight: 500;
            display: flex;
            justify-content: center;
            align-items: center;
            color: #FC3E32;
            font-size: 32rpx;
        }
        .item {
            position: relative;
            border-radius: 15rpx;
            background-color: #fff;
            border: 1rpx solid #C17C1C;
            width: 250rpx;
            margin: 0 10rpx;
            opacity: 1;

            .item-show {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 190rpx;
                position: relative;
                // background-color: #fff;

                .item-show-prize {
                    white-space: nowrap;
                    width: 184rpx;
                    height: 42rpx;
                    opacity: 1;
                    background: #90b9ff;
                    border-radius: 20rpx 20rpx 0rpx 0rpx;
                    line-height: 42rpx;
                    font-size: 24rpx;
                    font-family: Roboto, Roboto-Medium;
                    font-weight: 500;
                    text-align: LEFT;
                    color: #ffffff;
                    text-align: center;
                    position: absolute;
                    bottom: -2rpx;
                    z-index: 970;
                }

                image {
                    z-index: 99;
                    // width: 160rpx;
                    // height: 160rpx;
                    max-width: 250rpx;
                    max-height: 190rpx;
                    // margin-top: -62rpx;
                    opacity: 1;
                    border-radius: 15rpx 15rpx 0 0;
                    // box-shadow: 0rpx 8rpx 8rpx 0rpx rgba(142, 164, 212, 0.50);
                }
            }

            .item-text {
                display: flex;
                flex-direction: column;
                width: 100%;
                // height: 106rpx;
                padding: 12rpx 0 12rpx 16rpx;
                border-top: none;
                border-radius: 0 0 20rpx 20rpx;

                .item-name {
                    width: 100%;
                    font-size: 28rpx;
                    font-family: Roboto, Roboto-Medium;
                    font-weight: bold;
                    margin-top: 6rpx;
                }

                .item-num {
                    font-size: 28rpx;
                    color: #FC3E32;
                    font-family: DIN, DIN-Regular;
                    font-weight: 400;
                }

                .item-count {
                    margin-top: 6rpx;
                    font-size: 32rpx;
                    font-family: DIN, DIN-Medium;
                    font-weight: bold;
                    // color: #b9b9b9;
                    color: #FC3E32;
                }
                .remain_bg {
                    display: flex;
                    font-size: 24rpx;
                    color:#AAA;
                    height: 34rpx;
                    line-height: 36rpx;
                    // background: url(@/static/image/home/remain_bg.png) no-repeat;
                    background-size: 100% 100%;
                    align-items: center;
                }

                .item-line {
                    width: 100%;
                    margin: -8rpx 20rpx;
                }
            }
        }
    }
	.mission-box {
		position: fixed;
		z-index: 9999;
		top: 40%;
		left: 0;
		background: url(@/static/image/home/mission.gif) no-repeat;
		background-size: 100% 100%;
		width: 200rpx;
		height: 200rpx;
		display: flex;
		flex-direction: column;
		justify-content: end;
		align-items: center;
		.mission-content {
			background: url(@/static/image/home/mission-content.png) no-repeat;
			background-size: 100% 100%;
			width: 121rpx;
			height: 52rpx;
			text-align: center;
			line-height: 32rpx;
			font-size: 24rpx;
			color: #FFF;
			font-style: italic;
		}
	}
</style>
